<template>
  <el-card class="item" shadow="hover" :body-style="{height: '100%'}" @click="toDetail">
    <div class="content flex">
      <el-image :src="'/api' + data.cover" class="cover"/>
      <div class="info">
        <div class="name">{{data.name}}</div>
        <div class="tags">
          <el-tag type="primary" class="tag" size="large">{{data.category.name}}</el-tag>
          <el-tag type="success" v-for="item in data.tags" :key="item.id" class="tag" size="large">{{item.name}}</el-tag>
          <el-tag type="warning" class="tag" size="large">{{data.history.period}}</el-tag>
        </div>
        <div class="address">{{data.history.region}}</div>

        <div class="events" v-if="data?.historicalEvents && data.historicalEvents.length > 0">
          <el-badge :value="data.historicalEvents.length" type="primary" style="margin-right: 14px">
            <el-tag type="primary" size="large">{{data.historicalEvents[0].name}}......</el-tag>
          </el-badge>
          <el-badge :value="data.historicalFigures.length" type="primary" v-if="data.historicalFigures && data.historicalFigures.length > 0">
            <el-tag type="primary" size="large">{{data.historicalFigures[0].name}}......</el-tag>
          </el-badge>
        </div>

        <div class="like-views">
          <el-text type="primary" style="margin-right: 20px; font-size: 18px;">
            点赞:
            <el-icon>
              <StarFilled/>
            </el-icon>
            ({{likeAndView.like}})
          </el-text>


          <el-text type="success" style="font-size: 18px;">
            浏览:
            <el-icon>
              <View/>
            </el-icon>
            ({{likeAndView.view}})
          </el-text>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import {defineProps, onMounted, reactive} from 'vue'
import {liekAndViewApi} from '@/api/goods.js'
import {useRouter} from 'vue-router'

const router = useRouter()

const props = defineProps({
  data:{
    type: Object,
    default: ()=> ({})
  }
})

const likeAndView = reactive({
  like: 0,
  view: 0
})

const getLikeAndView = async ()=> {
  const res = await liekAndViewApi(props.data.id)
  likeAndView.like = res.data.like
  likeAndView.view = res.data.view
}

const toDetail = ()=> {
  router.push(`/detail/${props.data.id}`)
}

onMounted(()=> {
  getLikeAndView()
})
</script>
<style scoped lang="scss">
.item{
  width: 100%;
  height: 260px;
  margin-bottom: 14px;
  border-radius: 14px;
  cursor: pointer;
  .content{
    width: 100%;
    height: 100%;
    .cover{
      width: 240px;
      height: 100%;
      border-radius: 8px;
    }
    .info{
      flex: 1;
      padding-left: 30px;
      .name{
        font-size: 26px;
        color: #333;
        font-weight: bold;
        max-width: 1000px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tags{
        margin-top: 10px;
        .tag{
          margin-right: 8px;
        }
      }
      .address{
        margin-top: 10px;
        color: #73767a;
      }
      .events{
        margin-top: 20px;
      }
      .like-views{
        margin-top: 30px;
      }
    }
  }
}
</style>